<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="../../..//" lang="en">
<!-- 字符编码 -->
<meta charset="UTF-8" content="">
<!-- IE兼容模式 -->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 采用高速模式渲染（目前仅有360支持） -->
<meta name="renderer" content="webkit">
<!-- Bootstrap 核心 CSS库 -->
<link href="../../..//styles/BJUI/new/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Font-awesome 图标 CSS库 -->
<link href="../../..//styles/BJUI/new/css/font-awesome.min.css"
	rel="stylesheet">
<!-- JQuery UI CSS库 -->
<link href="../../..//styles/BJUI/new/css/jquery-ui.min.css"
	rel="stylesheet">
<!-- JQuery -->
<script src="../../..//styles/BJUI/new/js/jquery-1.10.2.min.js"
	type="text/javascript"></script>
<script
	src="../../..//styles/BJUI/new/js/jquery.unobtrusive-ajax.min.js"
	type="text/javascript"></script>
<!-- JQuery UI -->
<script src="../../..//styles/BJUI/new/js/jquery-ui.min.js"
	type="text/javascript"></script>
<!-- 脉动提示插件 -->
<script src="../../..//styles/BJUI/new/js/jquery.pulsate.min.js"
	type="text/javascript"></script>
<!-- Bootstrap 核心 JS库 -->
<script src="../../..//styles/BJUI/new/js/bootstrap.min.js"
	type="text/javascript"></script>
<!-- 浏览器判断 -->
<script src="../../..//styles/BJUI/new/js/Browser.js"
	type="text/javascript"></script>
<!-- 母版页 样式 -->
<link href="../../..//styles/BJUI/new/css/carousel.css"
	rel="stylesheet">
<link href="../../..//styles/BJUI/new/css/style.css" rel="stylesheet">
<link href="../../..//styles/BJUI/new/css/leon.css" rel="stylesheet">
<link href="../../..//styles/BJUI/new/css/index.css" rel="stylesheet">

<link href="../../..//styles/BJUI/new/css/nprogress.css"
	rel="stylesheet">
<title>下单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
	src="http://webapi.amap.com/maps?v=1.3&amp;key=f9d326eec206fa5f8ae57ccb028fc9bb&amp;plugin=AMap.Geocoder"></script>
<!--
	wx.getLocation({

			type : 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

			success : function(res) {
				alert(JSON.stringify(res));
				var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90

				var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

				var speed = res.speed; // 速度，以米/每秒计

				var accuracy = res.accuracy; // 位置精度
				wx.openLocation({

					latitude : latitude, // 纬度，浮点数，范围为90 ~ -90

					longitude : longitude, // 经度，浮点数，范围为180 ~ -180。

					name : '太平洋世纪广场', // 位置名

					address : '南宁市清秀区太平洋世纪广场', // 地址详情说明

					scale : 1, // 地图缩放级别,整形值,范围从1~28。默认为最大

					infoUrl : '' // 在查看位置界面底部显示的超链接,可点击跳转

				});
			}

		});
	-->

</head>

<body>
	<!-- Start: Ajax Tiper -->
	<!-- Start AJAX提示（全局） -->
	<script src="../../..//styles/BJUI/new/js/nprogress.js"
		type="text/javascript"></script>
	<div class="clearfix">
		<div class="carousel-inner" id="mainWindow">
			<form id="from" class="form-inline" action="">
				<div class="row" style="position: relative;">
					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text">出发</label>
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<input id="originAddress"  name="originAddress"  class="input-max"
							placeholder="详细地址，例：金洲路25号太平洋世纪广场">
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text display-left label-and-input">发货人姓名</label>
						<input id="originName" name="originName"
							class="input-max display-right placeholder-right"
							placeholder="必填">
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text display-left label-and-input">联系电话</label>
						<input id="originPhone"  name="originPhone"
							class="input-max display-right placeholder-right"
							placeholder="18978909232">
					</div>

					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text display-left">所需车型</label>

						<div class="display-right">
							<div class="dropdown">
								<button class="btn btn-default dropdown-toggle" type="button"
									id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="true"
									style="border: none; height: 38px; color: #a9a9a9">
									必填 请选择 <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"
									style="min-width: 0">
									<li><a href="javascript:vehicleType(1)">面包车</a></li>
									<li><a href="javascript:vehicleType(2)">金杯车</a></li>
									<li><a href="javascript:vehicleType(3)">2.6米厢式货车</a></li>
									<li><a href="javascript:vehicleType(6)">3.5米厢式货车</a></li>
									<li><a href="javascript:vehicleType(7)">4.2米厢式货车</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<input id="remarks" class="input-max" placeholder="请填写货物备注，可留空">
					</div>
					<div class="col-sm-8 box-size-120">
						<div class="text-center">
							<img src="../../..//styles/BJUI/new/images/to_place.png"
								style="width: 48px;" alt="">
						</div>
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text">目的</label>
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<input id="destinationAddress"  name="destinationAddress"   class="input-max"
							placeholder="详细地址，例：桂林国家高新区信息产业园">
					</div>
					<div class="col-sm-8 box-border-40-dotted">
						<label class="label-text display-left label-and-input">收货人姓名</label>
						<input id="destinationName" name="destinationName"
							class="input-max display-right placeholder-right"
							placeholder="必填">
					</div>
					<div class="col-sm-8 box-size-40">
						<input type="checkbox" name="blankRadio" id="blankRadio"
							value="option1" aria-label="Radio button without label text"
							style="margin-left: 10px;"> <label class="label-text"
							style="padding-left: 2px">接受<span style="color: #0099CC">《用户服务条款》</span></label>
					</div>
					<div class="col-sm-8 box-size-40" style="position: relative;">
						<div class="item-size">
							<div class="display-left link-40"></div>
							<div class="display-left text-center"
								style="width: 20%; height: 40px;">
								<span style="line-height: 40px;">支付方式</span>
							</div>
							<div class="display-right link-40"></div>
						</div>
					</div>
					<div class="col-sm-8" style="position: relative;">
						<div class="item-size" style="margin: 10px 10px;">
							<div id="AliPay" onclick="javascript:payType(1)"
								class="display-left text-center box-border-40-1 pay cursor-pointer">
								<span style="line-height: 40px;">在线支付</span>
							</div>
							<div class="display-left" style="width: 5%; height: 1px"></div>
							<div id="WeChatPay" onclick="javascript:payType(2)"
								class="display-left text-center box-border-40-1 pay cursor-pointer">
								<span style="line-height: 40px;">微信支付</span>
							</div>
						</div>
					</div>
					<div class="col-sm-8" style="position: relative;">
						<div class="item-size" style="height: 60px"></div>
					</div>
					<div class="col-sm-8"
						style="position: absolute; margin-top: 25px; bottom: 0; left: 0; width: 100%; margin-bottom: 0">
						<div class="item-size"
							style="background-color: #d7d7d7; height: 50px">
							<div class="display-left text-center" style="width: 70%">
								<span   style="line-height: 50px;">计算距离 <span
								id="distanceValue"
									style="color: #FF0000">12.3</span>公里，收费<span
									id="moneyValue"
									style="color: #FF0000">￥60 </span>元
								</span>
							</div>
							<div id="confirmButton" onclick="javascript:onBridgeReady()"
								class="display-right text-center cursor-pointer"
								style="width: 30%; background-color: #ff9900">
								<span style="line-height: 50px; color: #ffffff">下单</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 设置一些例的值，用于方便表单提交的序列化-->
				<input type="hidden" name="originLongitude" id="originLongitude" />
				<input type="hidden" name="originLatitude" id="originLatitude" /> <input
					type="hidden" name="destinationLatitude" id="destinationLatitude" />
				<input type="hidden" name="destinationLongitude"
					id="destinationLongitude" /> <input type="hidden"
					name="destinationLongitude" id="destinationLongitude" /> <input
					type="hidden" name="vehicleType" id="vehicleType" /> <input
					type="hidden" name="distance" id="distance" /> <input
					type="hidden" name="payType" id="payType" /> <input type="hidden"
					name="money" id="money" />
			</form>
		</div>
	</div>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
		type="text/javascript"></script>
	<script type="text/javascript">
		//	初始化jsdk接口
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

			appId : "${appId}", // 必填，公众号的唯一标识

			timestamp : "${timestamp}", // 必填，生成签名的时间戳

			nonceStr : "${nonceStr}", // 必填，生成签名的随机串

			signature : "${signature}",// 必填，签名，见附录1

			jsApiList : [ "openLocation", "getLocation", "chooseWXPay",
					"checkJsApi" ]
		});
		wx.ready(function() {

		});
		function writeObj(obj) {
			var description = "";
			for ( var i in obj) {
				var property = obj[i];
				description += i + " = " + property + "\n";
			}
			alert(description);
		}
	</script>
	<script type="text/javascript">
		function tasts() {
			//wx.checkJsApi({ //判断是否支持jsdk接口
			//	jsApiList : [ 'getNetworkType', 'previewImage' ],
			//	success : function(res) {
			//			alert(JSON.stringify(res));
			//		}
			//		});
			//	geocoder();
			wx
					.chooseWXPay({
						timestamp : 1414723227,
						nonceStr : 'noncestr',
						package : 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK&notify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
						paySign : 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
					});
		}
		function vehicleType(valse) {
			$("#vehicleType").val(valse);
		}
		function payType(valse) {
			$("#payType").val(valse);
		}
		//1、支付
		function onBridgeReady() {
			if ($("input[id='originLongitude']").val() == null
					|| $("input[id='originLongitude']").val() == "") {
				geocoder1($("input[id='originAddress']").val());
				geocoder2($("input[id='destinationAddress']").val());
				alert("正在计算距离和价格");
				return;
			}

			$.ajax({
				data : $('form').serialize(),
				type : "POST",
				dataType : 'json',
				url : "../../..//weixinView/orderPay",
				error : function(data) {
					alert("出错了！！:");
				},
				success : function(data) {
					if (data['status'] == 0) {
						var appId = data['data']['appId'];
						var paytimestamp = data['data']['timeStamp'];
						var paynonceStr = data['data']['nonceStr'];
						var paypackage = data['data']['pg'];
						var paySign = data['data']['paySign'];
						alert("paySign=" + paySign + "/n paypackage"
								+ paypackage + "/n paypackage=" + paynonceStr
								+ "/n appId" + appId + "/n paytimestamp"
								+ paytimestamp);
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId" : appId.toString(), //公众号名称，由商户传入     
							"nonceStr" : paynonceStr.toString(), //随机串     
							"package" : "prepay_id=" + paypackage.toString(),
							"signType" : "MD5", //微信签名方式： 
							"timeStamp" : paytimestamp.toString(), //时间戳，自1970年以来的秒数     
							"paySign" : paySign.toString()
						//微信签名 9A0A8659F005D6984697E2CA0A9CF3B7
						}, function(res) {
							alert(JSON.stringify(res));
							if (res.err_msg == "get_brand_wcpay_request：ok") {
							} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
						});
					} else {
						alert(data['msg']);
					}
				}
			});
		}
	//2-1出发地的经度纬度
		function geocoder1(str) {
			var geocoder = new AMap.Geocoder({
				city : "南宁市", //城市，默认：“全国”
				radius : 1000
			//范围，默认：500
			});
			//地理编码,返回地理编码结果
			geocoder.getLocation("广西南宁市" + str, function(status, result) {
				if (status === 'complete' && result.info === 'OK') {
					$("input[id='originLongitude']").val(
							result['geocodes'][0]['location']['lng']);
					$("input[id='originLatitude']").val(
							result['geocodes'][0]['location']['lat']);
					location();
				}
			});
		}
		//2-3得到两地之间的距离
		function location() {
			if ($("input[id='originLongitude']").val() != ""
					&& $("input[id='originLatitude']").val() != ""
					&& $("input[id='destinationLatitude']").val() != ""
					&& $("input[id='destinationLongitude']").val() != "") {

				var driving = new AMap.Driving(drivingOption); //构造驾车导航类
				//根据起终点坐标规划驾车路线
				driving.search([ $("input[id='originLongitude']").val(),
						$("input[id='originLatitude']").val() ], [
						$("input[id='destinationLongitude']").val(),
						$("input[id='destinationLatitude']").val() ], function(
						status, result) {
					calculationNunber(result.routes[0].distance)

				});
			}
		}
	
	//2-2目地地的经度纬度
	function geocoder2(str) {
		var geocoder = new AMap.Geocoder({
			city : "南宁市", //城市，默认：“全国”
			radius : 1000
		//范围，默认：500
		});
		//地理编码,返回地理编码结果
		geocoder.getLocation("广西南宁市" + str, function(status, result) {
			if (status === 'complete' && result.info === 'OK') {
				$("input[id='destinationLatitude']").val(
						result['geocodes'][0]['location']['lng']);
				$("input[id='destinationLongitude']").val(
						result['geocodes'][0]['location']['lat']);
				location();
			}
		});
	}
		//2-4计算价格
		function calculationNunber(number) {
			var value = $("#payType").val();
			if (value != null && value != "") {
				//得到多少公里  整数
				var temp = number / 1000;
				var temp1 = 0;
				var temp2 = 0;
				var temp3 = 0;
				var money = 0;
				var vehicleValue = $("#vehicleType").val();
				if (vehicleValue != null && vehicleValue != "") {
					switch (vehicleValue) {
					case "1":
						temp1 = 5;
						temp3 = 60;
						break;
					case "2":
						temp1 = 5;
						temp3 = 70;
						break;
					case "3":
						temp1 = 5;
						temp3 = 75;
						break;
					case "6":
						temp1 = 5;
						temp3 = 100;
						break;
					case "7":
						temp1 = 5;
						temp3 = 120;
						break;

					default:
						alert("错误的车辆类型");
						return;
						break;
					if (temp > 2) {
						temp2 = temp - 2;
						money = temp3 + money * temp1;
					} else {
						money = temp3;
					}
					$("#money").val(money);
					$("#distance").val(distance);
						$("#distanceValue").innerHTML="";
							$("#moneyValue").innerHTML="";
						alert("计算成功");
				}
			} else {
				alert("请选择车类型");
			}
		} else {
			alert("请选择支付类型");
		}

	}
	function tast() {

	}

	function writeObj(obj) {
		var description = "";
		for ( var i in obj) {
			var property = obj[i];
			description += i + " = " + property + "\n";
		}
		alert(description);
	}
	var mainH = $("#mainWindow").height();
	var itemW = $(".col-sm-8").width();
	var label = $(".label-and-input");
	var placeholder = $(".placeholder-right");
	var pays = $(".pay");
	var paysText = $(".pay span");

	var confirmButton = $("#confirmButton");

	$(function() {
		changeDivHeight();
	});

	window.onresize = function() {
		itemW = $(".col-sm-8").width();
		changeDivHeight();
	};

	function changeDivHeight() {
		for (var i = 0; i < label.size(); i++) {
			var labelW = $(label[i]).width();
			$(placeholder[i]).css({
				width : itemW - labelW - 24
			});
		}
	}

	$(function() {
		$(pays[0]).css({
			border : '1px #fe9800 solid'
		});
		$(pays[0]).children().css({
			color : '#660000'
		});
		pays.click(function() {
			pays.css({
				border : '1px #cbcbcb solid'
			});
			paysText.css({
				color : '#000000'
			});
			$(this).css({
				border : '1px #fe9800 solid'
			});
			$(this).children().css({
				color : '#660000'
			});
		})
	});

	$(function() {
		confirmButton.click(function() {
			confirmButton.css({
				'background-color' : '#C47400'
			});
		});
		confirmButton.mouseover(function() {
			confirmButton.css({
				'background-color' : '#C47400'
			});
		});
		confirmButton.mouseout(function() {
			confirmButton.css({
				'background-color' : '#ff9900'
			});
		});
	});
		</script>
</body>
</html>
